<script setup lang="ts">
import { useEventBus } from '@vueuse/core'
import { UseClipboard } from '@vueuse/components'
import goods from '~/pages/template/goods.vue'
import { unitPrice } from '~/utils/tools'
import type { EventBusParams, SendMessage } from '~/pages/types'
import { appendSendParams } from '~/pages/template/tools'

const props = withDefaults(defineProps<{
  res: any
  send?: boolean
}>(), {
  res: '',
  send: true,
})
const { emit } = useEventBus('message-bus')
function sendOrder() {
  const params: SendMessage = {
    context: props.res,
    messageType: 'MESSAGE',
    operationType: 'MESSAGE',
    ...appendSendParams(),
    // from: myself.value.id,
    // talkId: props.res.id,
    // to: props.res.userId,
  }
  const emitParams: EventBusParams = { type: 'sendMessage', params }
  emit(emitParams)
}

const orderStatusWay: any = {
  UNDELIVERED: '待发货',
  UNPAID: '未付款',
  PAID: '已付款',
  DELIVERED: '已发货',
  CANCELLED: '已取消',
  // COMPLETE: "已完成",
  TAKE: '待使用',
  COMPLETED: '已完成',
  STAY_PICKED_UP: '待自提',
}
</script>

<template>
  <div v-if="props.res" cursor-pointer border-b p-16px>
    <UseClipboard v-slot="{ copy, copied }" :source="res.sn">
      <div h-20px flex flex-a-c text-12px @click="copy()">
        订单号：<span v-if="!copied">{{ copied ? '' : res.sn }}</span> <a-tag :color="copied ? 'green' : 'gray'" size="small">
          {{ copied ? '复制成功' : '复制' }}
        </a-tag>
      </div>
    </UseClipboard>
    <div>
      <goods v-for="(item, index) in props.res.orderItems" :key="index" :send="false" :res="item" />
    </div>
    <div flex flex-j-sb flex-a-c py-16px text-12px>
      <div>订单金额：<span color-red-5>¥{{ unitPrice(res.flowPrice) }}</span></div>
      <div>{{ orderStatusWay[res.orderStatus] }}</div>
    </div>
    <div flex flex-j-sb flex-a-c text-12px color-warmgray>
      <div>
        {{ res.createTime }}
      </div>
      <a-button v-if="props.send" size="mini" @click="sendOrder">
        发送订单
      </a-button>
    </div>
  </div>
</template>

<style scoped></style>
